<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head('搜索话题')">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文章</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="../../static/layui/layui.css" rel="stylesheet">
    <link href="../../static/css/myui.css" rel="stylesheet">
    <link href="../../static/css/preview.css" rel="stylesheet">
    <script src="../../static/layui/layui.js"></script>
    <script src="../../static/jquery/jquery-3.7.1.min.js"></script>
</head>
<body>

<div style="background: rgb(47,54,60)" th:replace="_fragment::navigate(${user}, 0)">
    <div class="layui-container" style="display:flex;position: relative">
        <div class="myui-logo-container">
            <img style="width: 80%;height: 80%;border-radius: 5px" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
        </div>
        <ul class="layui-nav" style="margin-left: -10px">
            <li class="layui-nav-item">
                <a href="" class="layui-font-18" style="">话题</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">文章</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">Gitee</a>
            </li>
            <li class="layui-nav-item">
                <a href="" class="layui-font-18">Github</a>
            </li>
        </ul>
        <div style="position: absolute;right: 50px;margin-top: 10px">
            <div style="display: flex">
                <a class="layui-btn" style="margin-right: 20px">
                    <i class="layui-icon layui-icon-add-1"></i>
                    登录</a>
                <button class="layui-btn" id="post-button" style="margin-right: 20px">
                    <i class="layui-icon layui-icon-add-1"></i>
                    发表</button>
                <a href="javascript:;" class="myui-font-color-gray" id="user-info">
                    <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" style="border-radius: 50%;width: 35px;height: 35px ">
                    <span class="layui-font-14" style="color: whitesmoke">小小可小可小可小可小可可</span>
                    <i class="layui-icon layui-icon-down" style="color: whitesmoke"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="layui-container" style="margin-top: 10px;">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">
            <div class="layui-card" style="padding: 15px;display: block">
                <div class="layui-row layui-font-16" style="display: flex;padding: 20px">
                    "<h4 th:text="${searchKey}">123</h4>"&nbsp;&nbsp;搜索结果
                </div>
                <div class="layui-row">
                    <div class=" layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li>
                                <a th:href="@{'/index/search?type=user&key=' + ${searchKey}}">用户</a>
                            </li>
                            <li>
                                <a th:href="@{'/index/search?type=article&key=' + ${searchKey}}">文章</a>
                            </li>
                            <li class="layui-this">
                                <a>话题</a>
                            </li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item"></div>
                            <div class="layui-tab-item"></div>
                            <!--                        文章搜索-->
                            <div class="layui-tab-item layui-show">
                                <th:block th:replace="_fragment::preDynamics(${searchTopics})"></th:block>
                                <div class="layui-row" style="justify-content: center;display: flex" id="load-more-btn-area">
                                    <button th:classappend="${#lists.size(searchTopics) < 8 ? 'myui-hide' : ''}" id="load-more-btn" class="layui-btn layui-btn-xs">点击加载更多</button>
                                    <button th:classappend="${#lists.size(searchTopics) >= 8 ? 'myui-hide' : ''}" id="load-all" class="layui-btn layui-btn-xs layui-btn-primary">已经到底咯~</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-md3">
            <th:block th:replace="_fragment::checkPanel(${dailyCheck}, ${checkUsers}, ${user})"></th:block>

            <div class="layui-card">
                <div class="layui-card-header myui-side-title">公告</div>
                <div class="layui-card-body">
                    欢迎访问kkblog开发社区，目前属于demo版本，欢迎注册留言
                </div>
            </div>

            <div class="layui-card myui-side-card">
                <div class="layui-card-header myui-side-title">积分排行</div>
                <div class="layui-card-body">
                    <div class="layui-row" style="margin-bottom: 5px" th:each="u,stat:${ranks}">
                        <div class="layui-col-md2" style="padding-top: 1%">
                            <img class="myui-avatar-small" style="margin: auto;display: block" th:onclick="|window.location.href='/user/' + ${u.id}|" th:src="@{${u.avatar}}" src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg">
                        </div>
                        <div class="layui-col-md7" style="text-align: left">
                            <a class="layui-row layui-font-14 myui-a-tag" th:href="@{'/user/' + ${u.id}}" th:text="${u.nickname}">秋天的落叶</a>
                            <div class="layui-row layui-font-12" style="color: #6c6c70"><span th:text="${u.dynamicNumber}">212</span> 帖子 • <span th:text="${u.commentNumber}">12</span> 评论</div>
                        </div>
                        <div class="layui-col-md3 layui-font-14" style="display: flex;padding-top: 2%;color: #6c6c70">
                            <i class="layui-icon layui-icon-dollar" style="font-size: 14px"></i>&nbsp;
                            <span th:text="${u.scores}">32212</span>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row" style="margin-top: 30px;margin-bottom: 20px;text-align: center;color: darkgrey" th:replace="_fragment::footer">
    © 2024 Powered by Derek
</div>

</body>
</html>

<script th:inline="javascript">
    <!--/*/
     let user = [[${user}]];
     let searchTopics = [[${searchTopics}]];
      let searchKey = [[${searchKey}]]
    /*/-->;
    let doLikeOrUnlike = function (id) {
        if (user === undefined || user === null) {
            layer.open({
                title: '系统提示'
                ,content: '请登录后进行操作'
            });
            return;
        }
        if($('#like-gap-' + id).hasClass('active')) {
            $.get('/dynamic/unlike?dynamicId=' + id, function(res) {
                if (res.code === 200){
                    layer.msg('取消点赞成功！', {icon: 1}, function(){});
                    $('#like-gap-' + id).removeClass('active')
                    $('#like-number-' + id).text(Number($('#like-number-' + id).text()) - 1);
                } else {
                    layer.open({
                        title: '系统提示'
                        ,content: res.msg
                    });
                }
            });
        } else {
            $.get('/dynamic/like?dynamicId=' + id, function(res) {
                if (res.code === 200) {
                    layer.msg('点赞成功！', {icon: 1}, function(){});
                    $('#like-gap-' + id).addClass('active')
                    $('#like-number-' + id).text(Number($('#like-number-' + id).text()) + 1);
                } else {
                    layer.open({
                        title: '系统提示'
                        ,content: res.msg
                    });
                }
            });
        }
    }

    $(document).ready(function () {
        // 初始话搜索框
        $('#search-key').val(searchKey);
        $('#search-type').val('topic');

        $('#load-more-btn').on('click', function () {
            let lastId = searchTopics[searchTopics.length - 1].id
            $.get('/index/search/more?type=topic&lastId=' + lastId + '&key=' + searchKey, function(res) {
                if (res.code === 200) {
                    searchTopics = res.data;
                    let html = ""
                    for(let i = 0; i < res.data.length; i++) {
                        html += genDynamicHtml(res.data[i])
                    }
                    $('#load-more-btn-area').before(html)
                    if (res.data.length < 8) {
                        $('#load-more-btn').addClass('myui-hide')
                        $('#load-all').removeClass('myui-hide')
                    }
                } else {
                    layer.open({
                        title: '系统提示'
                        ,content: res.msg
                    });
                }
            });
        })
    })

    let genDynamicHtml = function (dynamic) {
        let tile = dynamic.type === 0 ? '' : ("<a class='myui-card-titler' target='_blank' href='http://localhost:8080' onclick='window.open(\"/dynamic/" + dynamic.id + "\", \"_blank\")'>" + dynamic.title + "</a>");
        let images = JSON.parse(dynamic.imageList);
        let imageHtml = ""
        if (images != null) {
            for(let i = 0; i < images.length; i++) {
                imageHtml += "<li class='myui-image-li' >" +
                    "    <img class='myui-list-image' src='" + images[i] + "'>" +
                    "</li>";
            }
        }
        let liked = dynamic.liked ? "active" : "";
        return  "<div class='layui-card myui-card' th:each='dynamic : ${dynamics}'>" +
            "                <div class='layui-card-body' style='width: 100%'>" +
            "                    <div class='myui-card-header'>" +
            "                        <span class='myui-nickname'>" + dynamic.nickname + "</span>" +
            "                        <span class='myui-time-tip'>发布于 " + dynamic.createTime + "</span>" +
            "                    </div>"
            + tile +
            "                    <div class='myui-card-content' onclick='window.open(\"/dynamic/ " + dynamic.id + "\", \"_blank\")'>"
            + dynamic.preView +
            "                    </div>" +
            "                    <ul class='myui-image-ul layui-row'>"
            + imageHtml +
            "                    </ul>" +
            "                    <div class='myui-card-footer'>" +
            "                        <div class='myui-gap " + liked + "' id='like-gap-" + dynamic.id + "' onclick='doLikeOrUnlike(" + dynamic.id + ")'>" +
            "                            <i class='layui-icon layui-icon-star-fill myui-like-icon'></i>&nbsp;点赞&nbsp;<span id='like-number-" + dynamic.id + "'>" +
            dynamic.likeNumber + " </span>" +
            "                        </div>" +
            "                        <div  class='myui-gap'>" +
            "                            <i class='layui-icon layui-icon-reply-fill'></i>&nbsp;评论&nbsp;<span th:text='${dynamic.commentNumber}'>" + dynamic.commentNumber + "</span>" +
            "                        </div>" +
            "                        <div  class='myui-gap'>" +
            "                            <i class='layui-icon layui-icon-read'></i>&nbsp;浏览&nbsp;<span th:text='${dynamic.viewNumber}'>" + dynamic.viewNumber + "</span>" +
            "                        </div>" +
            "                        <div class='myui-topic-tip'>" + dynamic.topicName + "</div>" +
            "                    </div>" +
            "                </div>" +
            "            </div>"
    }
</script>